<!DOCTYPE html>
<html lang="ch">
<head>
    <title></title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 总结：
    -->
    <div id="demo">
        <input type="text" v-model="name"> <br>
        <input type="text" v-model:myage="age"> <br>
        <input type="text" v-model:address="address"> <br>
        <input type="text" v-model:per="person.name"> <br>
        <input type="text" v-model:per="aaa.bbb.ccc.ddd"> <br>
        <button @click="testClick()">提交</button>
        
    </div>
    <!-- v-model:value  v-model=""  默认就是手机表单的值 -->
    <!-- v-model:aaa 可以自定义属性 -->
    <script type="text/javascript">
    Vue.config.productionTip = false //关闭生产提示
    const vm = new Vue({
        el:"#demo",
        data:{
            name:"test",
            age:"20",
            address:"sz",
            person:{name:"aa",age:"bb"},
            aaa:{
                bbb:{
                    ccc:{
                        ddd:"嵌套的值"
                    }
                }
            }

        },
        methods:{//methods methods methods
            testClick(){
                console.log("测试方法被调用")
                
            },
            methodAge(){
                console.log("age的method监听触发")
            }
            
        },
        watch:{//watch本质是一个对象
            //键是需要观察的属性(表达式)，值是回调函数|也可以是方法名|或者包含选项的对象
            name:function(){
                console.log("name的监听触发了"+this.name)
            },
            age:"testClick",//方法名
            address:{
                //包含选项的对象，即选项是官方的属性，必须要用他的不能自定义
                handler(newV,oldV){
                    console.log("newV"+newV+"=="+"oldV"+oldV)
                },
                immediate:true
                
            },
           "person.name":{
                handler(n,o){
                    console.log("监听对象属性")
                },
                deep:false
           },
           "aaa.bbb.ccc.ddd":{
                handler(n,o){
                    console.log("深度监听属性,为什么开false的还是能触发???")
                },
                deep:false
           }
            
        }
    })
    </script>
</body>
</html>